<template>
  <div>
    <!-- 1.0 图片 -->
    <div class="bg-top">
      <img src="@/assets/images/banner 02.png" alt="" />
    </div>

    <!-- 2.0 列表展示 -->
    <h3 class="title"><i></i>学科项目库</h3>
    <div class="pro-list">
      <router-link to="/stage/1">
        <img src="@/assets/images/java.png" alt="" />
      </router-link>
      <router-link to="/stage/2">
        <img src="@/assets/images/H5.png" alt="" />
      </router-link>
      <router-link to="/stage/3">
        <img src="@/assets/images/UI.png" alt="" />
      </router-link>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="less" scoped>
.bg-top {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0d0d25;
  overflow: hidden;
  img {
    height: 180px;
    transform: scale(1.2);
  }
}

.pro-list {
  width: 980px;
  max-width: 1120px;
  margin: 0 auto;

  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;

  img {
    width: 150px;
    height: 150px;
  }
}

.title {
  width: 930px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 0;
  font-size: 20px;
  display: flex;
  align-items: center;
  color: #333;
  i {
    display: inline-block;
    width: 3px;
    height: 20px;
    background-color: #000;
    margin-right: 8px;
  }
}
</style>
